<template>
    <!--市场端口的子组件-->
    <div>
        <div class="table-head-search">
            <el-row class="el-row">
                <el-col :span="24" class="el-col">
                    <div class="linerow">
                        <el-input v-model="input" placeholder="学生姓名" class="input" size="mini"></el-input>
                        <el-input placeholder="联系手机" class="input" size="mini"></el-input>
                        <el-select v-model="value" filterable placeholder="就读学校" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-select v-model="value" filterable placeholder="性别" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-select v-model="value" filterable placeholder="年级" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-select v-model="value" filterable placeholder="市场专员" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-select v-model="value" filterable placeholder="状态" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <div class="block input">
                            <el-date-picker type="date" v-model="allotTime" placeholder="分配时间"
                                            :picker-options="pickerOptions" size="mini"></el-date-picker>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="el-col">
                    <div class="linerow">
                        <el-input v-model="input" placeholder="学生姓名" class="input" size="mini"></el-input>
                        <el-input v-model="input" placeholder="联系手机" class="input" size="mini"></el-input>
                        <el-select v-model="value" filterable placeholder="就读学校" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-select v-model="value" filterable placeholder="性别" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-select v-model="value" filterable placeholder="年级" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-select v-model="value" filterable placeholder="市场专员" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-select v-model="value" filterable placeholder="状态" class="input" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <div class="block input">
                            <el-date-picker type="date" v-model="allotTime" placeholder="分配时间"
                                            :picker-options="pickerOptions" size="mini"></el-date-picker>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--增加功能-->
        <SaveStudent :isShowSaveStudent="isShowSaveStudent" @closeEvent="childCloseEvent"></SaveStudent>
        <div class="add-pane">
            <el-button type="primary" size="small" icon="el-icon-circle-plus" round @click="isShowSaveStudent = true">增加</el-button>
            <el-button type="primary" size="small" icon="el-icon-edit-outline" round>修改</el-button>
            <el-button type="info" size="small" icon="el-icon-upload2" round>导入</el-button>
            <el-button type="info" size="small" icon="el-icon-download" round>下载</el-button>
            <el-button type="warning" size="small" icon="el-icon-remove" round>删除</el-button>
        </div>
        <div class="table-head-content">当前结果：线索共计<span style="color: rgb(82,149,231);" v-text="studentTotal"></span>条
        </div>
        <div class="content">
            <el-table :data="tstudentList" stripe>
                <el-table-column prop="stuName" label="学生姓名" fixed></el-table-column>
                <el-table-column prop="starLevel" label="星标"></el-table-column>
                <el-table-column prop="stuMobile" label="手机" width="100px"></el-table-column>
                <el-table-column prop="stuSex" label="性别" width="100px"></el-table-column>
                <el-table-column prop="stuSchool" label="就读学校" width="100px"></el-table-column>
                <el-table-column prop="stuGrade" label="年级" width="100px"></el-table-column>
                <el-table-column prop="intention" label="意向度" width="100px"></el-table-column>
                <el-table-column prop="centerId" label="所报中心" width="100px"></el-table-column>
                <el-table-column prop="sourceId" label="渠道" width="100px"></el-table-column>
                <el-table-column prop="introduceEmpId" label="推荐老师" width="100px"></el-table-column>
                <el-table-column prop="introduceId" label="推荐学员" width="100px"></el-table-column>
                <el-table-column prop="infoLink" label="链接" width="100px"></el-table-column>
                <el-table-column prop="keyWord" label="关键词" width="100px"></el-table-column>
                <el-table-column prop="stuAddress" label="住址" width="100px"></el-table-column>
                <el-table-column prop="infoCondition" label="信息质量" width="100px"></el-table-column>
                <el-table-column prop="allotTime" label="分配时间" width="100px"></el-table-column>
                <el-table-column prop="allotManId" label="分配人" width="100px"></el-table-column>
                <el-table-column prop="stuRemark" label="备注" width="100px"></el-table-column>
                <el-table-column prop="isPublic" label="是否公海" width="100px"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="100px"></el-table-column>
                <el-table-column prop="userId" label="录量员工" width="100px"></el-table-column>
                <el-table-column prop="isFullPay" label="是否全款" width="100px"></el-table-column>
                <el-table-column prop="state" label="状态" width="100px"></el-table-column>
            </el-table>
            <div class="table-page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               background
                               layout="total, sizes, prev, pager, next, jumper"
                               :page-sizes="[10, 20, 30, 40, 50]"
                               :page-size="10"
                               :total="studentTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import SaveStudent from "./SaveStudent";
    export default {
        name: "Student",
        components: {SaveStudent},
        created() {
            this.studentList()
        },
        data() {
            return {
                drawer: false,
                params: {
                    'pageNum': 1,
                    'pageSize': 10
                },
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '12',
                input: '1234',
                tstudentList: [],
                studentTotal: 0,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                allotTime: '',
                isShowSaveStudent: false
            }
        },
        methods: {
            async studentList() {
                const {data: studentList} = await this.$http({
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    method: 'post',
                    url: 'http://localhost:9003/student/client/queryList',
                    data: JSON.stringify(this.params)
                })
                this.tstudentList = studentList.queryList
                this.studentTotal = studentList.totalCount
            },
            // 关闭子组件回调函数
            childCloseEvent(data) {
                this.isShowSaveStudent = data;
            },
            handleSizeChange(event) {
                console.log(event)
            },
            handleCurrentChange(event) {
                console.log(event)
            },
        }
    }
</script>

<style lang="less" scoped>
    .input {
        width: 25% !important;
        margin-right: 10px;
    }

    .input:last-child {
        margin-right: 0px !important;
    }

    .linerow {
        display: flex;
    }

    .linerow .el-date-editor.el-input {
        width: 100% !important;
    }
</style>
